<template>
    <div>
        <div class="user-container">


            <el-card class="user-content" shadow="hover"
                :body-style="{ padding: '20px 50px', height: '100%', boxSizing: 'border-box' }">
                <el-tabs tab-position="left" v-model="activeName">
                    <el-tab-pane name="label1" label="个人信息" class="user-tabpane">
                        <el-descriptions title="个人信息" :column="2" border>
                            <el-descriptions-item v-for="item in list" :span="item.span">
                                <template #label> {{ item.label }} </template>
                                <p v-if="item.prop=='type'">
                                    <el-tag type="success" v-if="row.type==1">管理员</el-tag>
					                <el-tag type="warning" v-else>教师</el-tag>
                                </p>
                                <p v-else>{{ item.value || row[item.prop] }}</p>
                            </el-descriptions-item>
                        </el-descriptions>
                    </el-tab-pane>
                    <el-tab-pane name="label2" label="修改密码" class="user-tabpane">
                        <el-form class="w500" label-position="top">
                            <el-form-item label="新密码：">
                                <el-input type="password" v-model="form.new"></el-input>
                            </el-form-item>
                            <el-form-item label="确认新密码：">
                                <el-input type="password" v-model="form.new1"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="onSubmit">保存</el-button>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>

                </el-tabs>
            </el-card>
        </div>
    </div>
</template>

<script setup lang="ts" name="ucenter">
import { reactive, ref } from 'vue';
import { VueCropper } from 'vue-cropper';
import 'vue-cropper/dist/index.css';
import avatar from '@/assets/img/img.jpg';
import TabsComp from '../element/tabs.vue';
import TableDetail from '@/components/table-detail.vue';
import { fetchStudentData, fetchTeacherData ,updateStudentPasswd,updateTeacherPasswd} from '@/api/index';
import { util_d$1 } from 'echarts/types/dist/shared';
import { ElMessage } from 'element-plus';

const name = localStorage.getItem('vuems_name');
const form = reactive({
    new1: '',
    new: '',
    old: '',
});
const onSubmit = () => {
    
    const role = localStorage.getItem('vuems_role');
    if(form.new!==form.new1){
        ElMessage.error('输入密码不一致');
    }else{
        if(role==='student'){
            updateStudentPasswd(form.new).then(res=>{
                ElMessage.success('修改成功');
            }).catch(err=>{
                ElMessage.error('修改失败');
            })
        }else{
            updateTeacherPasswd(form.new).then(res=>{
                ElMessage.success('修改成功');
            }).catch(err=>{
                ElMessage.error('修改失败');
            })
        }
    }
 };

const activeName = ref('label1');

const row=ref({});
const list=ref([]);
// 基本信息
const studentInfo = [
    { prop: 'name', label: '姓名' },
    { prop: 'sid', label: '学号' },
    { prop: 'gender', label: '性别' },
    { prop: 'class_id', label: '班级id' },
    { prop: 'collegeName', label: '学院' }
]
const teacherInfo = [
    { prop: 'name', label: '姓名' },
    { prop: 'teacher_id', label: '教师号' },
    { prop: 'gender', label: '性别' },
    { prop: 'collegeName', label: '学院' },
    { prop: 'type', label: '权限' }
]

const getUserInfo = async () => {
    const id = localStorage.getItem('vuems_name');
    const role = localStorage.getItem('vuems_role');
    console.log(role);
    if (role === 'student') {
        const res = await fetchStudentData({ index: 1, size: 1 }, { sid: id });
        row.value = res.data.pageList[0]
        row.value.collegeName = row.value.college.name+'('+row.value.college.college_id+')'
        list.value = studentInfo
    } else {
        const res = await fetchTeacherData({ index: 1, size: 1 }, { tid: id });
        row.value = res.data.pageList[0]
        row.value.collegeName = row.value.college.name+'('+row.value.college.college_id+')'
        list.value = teacherInfo
    }
};
getUserInfo();
</script>

<style scoped>
.user-container {
    display: flex;
}

.user-profile {
    position: relative;
}


.user-profile {
    width: 500px;
    margin-right: 20px;
    flex: 0 0 auto;
    align-self: flex-start;
}

.user-avatar-wrap {
    position: absolute;
    top: 135px;
    width: 100%;
    text-align: center;
}

.user-avatar {
    border: 5px solid #fff;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 7px 12px 0 rgba(62, 57, 107, 0.16);
}

.user-info {
    text-align: center;
    padding: 80px 0 30px;
}

.info-name {
    margin: 0 0 20px;
    font-size: 22px;
    font-weight: 500;
    color: #373a3c;
}

.info-desc {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
}

.info-desc,
.info-desc a {
    font-size: 18px;
    color: #55595c;
}

.info-icon {
    margin-top: 10px;
}

.info-icon i {
    font-size: 30px;
    margin: 0 10px;
    color: #343434;
}

.user-content {
    flex: 1;
}

.user-tabpane {
    padding: 10px 20px;
}

.crop-wrap {
    width: 600px;
    height: 350px;
    margin-bottom: 20px;
}

.crop-demo-btn {
    position: relative;
}

.crop-input {
    position: absolute;
    width: 100px;
    height: 40px;
    left: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
}

.w500 {
    width: 500px;
}

.user-footer {
    display: flex;
    border-top: 1px solid rgba(83, 70, 134, 0.1);
}

.user-footer-item {
    padding: 20px 0;
    width: 33.3333333333%;
    text-align: center;
}

.user-footer>div+div {
    border-left: 1px solid rgba(83, 70, 134, 0.1);
}
</style>

<style>
.el-tabs.el-tabs--left {
    height: 100%;
}
</style>
